<script setup>
/**
 * @name 选择花字效果的组件
*/
import { computed, ref } from 'vue';

import { useStore } from 'vuex'
// 仓库
const store = useStore();

const emit = defineEmits(['updateFlowerId'])

const  visible = ref(false)

const props = defineProps({
    // 当前编辑的数据
    editItem: {
        type: Object,
        default: () => {
            return {}
        }
    },
    // 作为哪个模块的组件使用
    useKey: {
        type: String,
        default: 'main'
    },
    // 当前选择的花字id
    activeFlower: {
        type: String,
        default: ''
    }
})

// 花字列表
const flowerList = computed(() => {
  return store.state.GraphicTextMixCut.flowerList
});

// 选中花字的样式
const mainSelectFont = computed(() => {
  const find = flowerList.value.find(item => item.id == props.editItem[props.useKey].config.flower_id)
  if (!!find) {    
    return {
      color: find.fontcolor,
      "-webkit-text-stroke": find.bordercolor ? `1px ${find.bordercolor}` : "",
      backgroundColor: find.boxcolor
    }
  }
  return {}
})

// 获得对应项的字体样式
const getStyle = (item) => {
  // debugger
  return {
    color: item.fontcolor,
    "-webkit-text-stroke": item.bordercolor ? `1px ${item.bordercolor}` : "",
  };
};

// 选择花字样式
const selectFontStyle = (item) => {
    emit('updateFlowerId', item.id)
    visible.value = false
}
</script>


<template>
    <div class="config_item">
        <span class="mini_title">效果:</span>
        <a-popover :autoAdjustOverflow="false" :getPopupContainer=" triggerNode => {
        return triggerNode.parentNode;
    }" trigger="click" :title="null" placement="bottomRight"
    v-model:visible="visible"
    >
        <template #content>
            <div class="font_style_box">
    <div class="font_style_content_box">
        <!-- 禁用选项 -->
        <!-- <div @click="selectFontStyle('')" class="font_style_content_item font_disabled"
        :class="{ 'active_font_style': activeFlower == '' }">
        <cu-icon type="icon-jinyong"></cu-icon>
        </div> -->
        <!-- 可选项 -->
        <div @click="selectFontStyle(i)" :style="{
        background: i.boxcolor || '#e2e2e2',
        }" class="font_style_content_item" :class="{ 'active_font_style': props.activeFlower == i.id}"
        v-for="i in flowerList" :key="i.name">
        <p class="font_style_content_item_text" :style="getStyle(i)">
            花字
        </p>
    </div>
    </div>
    <!-- 折叠 -->
    <div class="folding_panel" @click="foldingPanel" v-if="FlowerArr?.length > 20">
        <span>{{ isFlod ? "收起更多" : "展开更多" }}</span>
        <CaretDownOutlined v-if="!isFlod" />
        <caret-up-outlined v-else />
    </div>
    </div>
        </template>
        <template #title>
            <span></span>
        </template>
        <div class="effect">
            <p class="font_select_style" :style="mainSelectFont">
            花字
        </p>
        </div>
        </a-popover>
    </div>
</template>

<style lang="less" scoped>
    .config_item{
      display: flex;
      flex-direction: column;
      gap:5px;

    .effect {
      border:1px solid #d9d9d9;
      transition: all 0.3s;
      width: 190px;
      height: 31px;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      &:hover{
        border-color: #5297ff;
      }

      .font_select_style{
        font-size: 15px;
        margin: 0;
        font-weight: 900;
        line-height: 1.6;
      }
    }

    // 花字列表样式
// 花字设置
.font_style_box {
  width: 600px;
  max-height: 400px;
  overflow-y: auto;

  &::-webkit-scrollbar {
      width: 8px; /* 滚动条的宽度 */
      height: 10px; /* 滚动条的高度，垂直滚动条可能用得上 */
  }

.font_style_content_box {
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  overflow: hidden;

  .font_style_content_item {
    border: 2px solid #ededee;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;

    .font_img{
      width: 200px;
      height: 51px;
      object-fit: contain;
    }

    &:hover {
      border-color: #1664ff;
      background-color: #e8f7ff;
    }

    .font_style_content_item_text {
      width: 51px;
      font-size: 20px;
      line-height: 51px;
      text-align: center;
      margin: 0;
      font-weight: 900;
    }
  }

  .active_font_style {
    border-color: #1664ff;
  }
}

  // 禁用
  .font_disabled {
    width: 51px;
    font-size: 32px;
    text-align: center;
  }


// 折叠按钮
.folding_panel {
  color: #737a87;
  text-align: center;
  width: 100%;
  display: block;
  cursor: pointer;
  margin-top: 15px;
}
}

    }
</style>